<template>
  <div>
    <div class="list">
      <div
        class="list-item"
        :style="computeListItemStyle(item)"
        v-for="item in items"
        :key="item.name"
        @click="handleClickItemBox(item)"
      >
        <div class="list-item-image">
          <img
            class="icon"
            :style="styleIconImage"
            :src="attrImageSrcForItem(item)"
          />
        </div>
        <div class="list-item-label">
          <el-button
            link
            :title="item.name"
            @click="handleClickItemLabel(item)"
          >
            {{ item.name }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import MHolderJS from "./model_holder";
import GetterJS from "@/js/getter";

export default {
  name: "files-list-view-icon",

  computed: {
    items() {
      let holder = this.getMH();
      return holder.GetItems();
    },

    styleIconImage() {
      let size = this.size;
      let width = size + "px";
      let height = size + "px";
      return { width, height };
    },

    currentSelectionItemName() {
      let holder = this.getMH();
      return holder.GetCurrentSelectionItem();
    },

    selectionMode() {
      let holder = this.getMH();
      return holder.GetSelectionMode();
    },
  },

  data() {
    return {
      checked2: false,
    };
  },

  methods: {
    getMH() {
      let vo = this.modelValue;
      let holder = MHolderJS.New(vo);
      return holder;
    },

    onMounting(action) {
      const mode = "icon";
      let str = "listview." + action + "(" + mode + ")";
      console.log(str);
    },

    handleClickItemLabel(item) {
      let action = "open";
      this.$emit("action", { action, item });
    },

    handleClickItemBox(item) {
      let h = this.getMH();
      let name = item.name;
      item.selected = !item.selected;
      h.SetCurrentSelectionItem(name);
    },

    attrImageSrcForItem(item) {
      let g = GetterJS.NewGetter(item);
      let src = g.Get("type_info.icon", ".", "/image/icons/not_found");
      return src;
    },

    computeListItemStyle(item) {
      let borderColor = "#00000000";
      let backgroundColor = "#00000000";

      if (item.name == this.currentSelectionItemName) {
        borderColor = "gray";
      }

      if (item.selected) {
        backgroundColor = "#ccc";
      }

      return { borderColor, backgroundColor };
    },
  },

  mounted() {
    this.onMounting("mounted");
  },

  unmounted() {
    this.onMounting("unmounted");
  },

  props: {
    modelValue: Object,
    size: { type: Number, default: 64 },
  },
};
</script>

<style scoped>
.list {
  /* background-color: rgb(255, 234, 237); */
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  margin: 10px;
  border-color: rgb(206, 206, 206);
  border-style: dotted;
  border-width: 2px;
}

.list-item-image {
  /* width: 100px;
  height: 100px; */
  border-width: 1px;
}

.list-item-label {
  padding: 3px;
  overflow: clip;
  border-width: 0px;
  text-align: center;
}

.icon {
  /* max-width: 56px;
  max-height: 56px; */
  border-width: 0px;
}
</style>
